import React from "react";
import './head.scss'
import { Icon } from "antd-mobile";
import {withRouter} from 'react-router-dom'
import getCity from '../../utils/city.js' 
class Head extends React.Component{
   
    state={
        city:""
    }
    goCity=()=>{
      this.props.history.push('/city')
    }
    goMap=()=>{
        this.props.history.push('/map')
    }
    componentDidMount(){
        getCity().then(res=>{
            this.setState({
                city:res.label
            })
        })
    }
    render(){
        let {city}=this.state
        let {headStyle}=this.props
        return <div className='search-header' style={headStyle}>
            <div className='left'>
                <div className='city-name' onClick={this.goCity}>
                    <span className='text'>{city}</span>
                    <Icon type='down' color='#7f7f80'></Icon>
                </div>
                <div className='search'>
                    <Icon type='search' color='#7f7f80' size='xxs'></Icon>
                    <span className='text'>请输入小区或地址</span>
                </div>
            </div>
           
           <div className='head-map' onClick={this.goMap}>
               <i className='iconfont icon-map' ></i>
             </div>
        </div>
    }
}

export default withRouter(Head)

